<template>
	<zh-form ref="userForm" :model="state.form" :rules="state.rules">
		<zh-form-input prop="userName" label="账号" v-model="state.form.userName" :disabled="true"></zh-form-input>
		<zh-form-input prop="nikeName" label="昵称" v-model="state.form.nikeName"></zh-form-input>
		<zh-form-select
			prop="cardType"
			label="证件类型"
			placeholder="单选"
			allowClear
			:options="state.dictData.cardType"
			v-model="state.form.cardType"
		></zh-form-select>
		<zh-form-input prop="idcard" label="证件号码" v-model="state.form.idcard"></zh-form-input>
		<zh-form-input prop="fullName" label="账号名称" v-model="state.form.fullName"></zh-form-input>
		<zh-form-select prop="sex" label="性别" placeholder="单选" allowClear :options="state.dictData.sex" v-model="state.form.sex"></zh-form-select>
		<zh-form-date prop="birthday" label="出生日期" format="YYYY-MM-DD" v-model="state.form.birthday"></zh-form-date>
		<zh-form-input prop="cellphone" label="手机号码" v-model="state.form.cellphone"></zh-form-input>
		<zh-form-input prop="officePhone" label="办公室电话" v-model="state.form.officePhone"></zh-form-input>
		<zh-form-input prop="shortPhone" label="手机短号" v-model="state.form.shortPhone"></zh-form-input>
		<zh-form-input prop="email" label="邮箱" v-model="state.form.email"></zh-form-input>
		<zh-form-select
			prop="userType"
			:disabled="state.userTypeDisabled"
			label="身份"
			placeholder="单选"
			allowClear
			:options="state.dictData.userType"
			v-model="state.form.userType"
		></zh-form-select>
		<zh-form-select
			prop="status"
			:disabled="true"
			label="状态"
			placeholder="单选"
			allowClear
			:options="state.statusData"
			v-model="state.form.status"
		></zh-form-select>
		<zh-form-input label="所在单位组织" prop="orgName" :disabled="true" v-model="state.form.orgName"> </zh-form-input>
		<zh-form-input :span="24" prop="userIp" label="允许登录的IP" v-model="state.form.userIp"></zh-form-input>
		<zh-form-input :span="24" prop="addressDetail" label="地址" v-model="state.form.addressDetail"></zh-form-input>
		<zh-form-upload :span="24" label="头像" :limit="1" v-model="state.form.avatarShowId" @on-change="imgChange"> </zh-form-upload>
		<zh-form-input :span="24" :rows="4" prop="remarks" type="textarea" label="备注" v-model="state.form.remarks"></zh-form-input>
	</zh-form>
</template>

<script lang="ts" setup name="PersonalForm">
import validate from '@/utils/validate';
import { ElMessage } from 'element-plus';
//------------------接收传入参数(组件)-------------------
const props = defineProps({
	userInfo: {
		type: Object,
		default: () => {},
		required: false,
	},
	modelValue: Boolean,
});

//------------------定义子组件---------------------------
const userForm = ref<any>({});

//------------------内部变量定义-------------------------
const state = reactive({
	statusData: [
		{ dictKey: '1', dictValue: '启用' },
		{ dictKey: '0', dictValue: '禁用' },
	],
	flagData: [
		{ dictKey: '1', dictValue: '是' },
		{ dictKey: '0', dictValue: '否' },
	],
	rules: {
		userName: [{ required: true, message: '请输入用户名', whitespace: true }],
		cardType: [{ required: false, message: '请选择证件类型' }],
		idcard: [
			{ required: false, message: '请输入证件号码', whitespace: true },
			{ validator: checkIdcard, trigger: 'change' },
		],
		fullName: [{ required: false, message: '请输入姓名', whitespace: true }],
		cellphone: [
			{ required: false, message: '请输入手机号码', whitespace: true, pattern: /^1[3456789]\d{9}$/ },
			{ message: '请输入正确的手机号码', pattern: /^1[3456789]\d{9}$/ },
		],
		email: [{ required: false, type: 'email', message: '请输入邮箱地址' }],
		userType: [{ required: true, message: '请选择用户类型' }],
		status: [{ required: true, message: '请选择用户状态' }],
	},
	userTypeDisabled: true,
	dictData: {} as any,
	orgSelectTreeData: [],
	form: props.userInfo,
});

//------------------定义调用方法-------------------------
function checkIdcard(rule, value, callback) {
	if (!value) {
		callback();
		return;
	}
	if (state.form.cardType === '01' && !validate.isIdcard(value)) {
		callback(new Error('请输入正确的身份证'));
	} else {
		callback();
	}
}
function imgChange(e) {
	state.form.photoPath = $api.common.fileShowUrl.url + e[0];
}
async function saveUser() {
	//校验表单
	let checkFlag = await userForm.value.checkForm();
	if (checkFlag) {
		const userInfo = state.form;
		let ret = {} as any;
		if (userInfo.userId) {
			ret = await $api.common.send.postCrypto('user0002', userInfo);
			if (ret.code === 0) {
				ElMessage.success('修改成功！');
			}
		}
		return ret;
	}
	return null;
}

//------------------初始化------------------------------

// 数据初始化
if (props.userInfo) {
	if (props.userInfo.userType) {
		state.userTypeDisabled = true;
		// eslint-disable-next-line vue/no-setup-props-destructure
		state.form.userType = props.userInfo.userType;
	} else {
		state.userTypeDisabled = false;
	}
	
} else {
	state.userTypeDisabled = false;
}
// 数据字典初始化
const params = {} as any;
params.dictFields = 'userType,sex,cardType';
$api.common.getBatchDict.post(params).then((res) => {
	state.dictData = res.result;
});
watch(
	() => props.userInfo,
	(val) => {
		if (val) {
			if (val.userType) {
				state.userTypeDisabled = true;
				
			} else {
				state.userTypeDisabled = false;
			}
			
		} else {
			state.userTypeDisabled = false;
		}
		state.form=val
	}
);
//------------设置给父组件调用的数据/方法(组件)-----------
defineExpose({ form: state.form, saveUser });
</script>
